<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
    span{
        display: block;
    }
    .warn{
        color: red;
    }
    </style>
</head>
<body>
    <div id="app1">
        <fieldset>
      <legend>
商品详情
      </legend>
<p>
    <label for="id">编号：</label>
    <input type="text" name="id" id="id" v-model="prod.id" />
</p>
<p>
    <label for="name">名称：</label>
    <input type="text" name="name" id="name" v-model="prod.name"/>
    <span v-bind:class="{warn:isValid}">商品名不能玩为空</span>
</p>
<p>
    <label for="price">价格：</label>
    <input type="text" name="price" id="price" v-model="prod.price" />
</p>

<p>
    <input type="button" value="保存" v-on:click="doSave"/>
</p>
        </fieldset>
        <input type="text" placeholder="请输入查询关键字。。。" v-model="searchKey" />
     <table class="table">

        <thead>
            <tr><td>编号</td><td>名称</td><td>价格</td><td>操作 </td></tr>

        </thead>
        <tbody>
            <tr v-for="item in searchProdList">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td> &yen; {{item.price|priceFormat}}  </td>
                <td><button v-on:click="doDelete(item.id)">删除</button></td>
            </tr>
        </tbody>
     </table>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
var vm=new Vue({
    el:"#app1",
    data:{
    prod:{id:0,name:'',price:0},
    prodList:[{id:0,name:'iphone',price:123}],
    searchKey:'',
    isValid:true
    },
    computed:{//就算属性
        searchProdList:function(){
            var self=this;
            return this.prodList.filter(function(item){
                return item.name.indexOf(self.searchKey)!=-1;
            })
        }
    },
    filters:{//过滤器
        priceFormat:function(priceVal){
            return parseFloat(priceVal).toFixed(2)+"元";
        }
    },
    watch:{
prod:{
    handler(val){
        this.isValid=val.name==""?true:false
    },
    deep:true
}
    },
    methods:{
        doSave:function(){

            this.prodList.push(this.prod);
            console.log(this.prodList);
            //清空文本框
            this.prod={id:0,name:'',price:0};
        },
        doDelete:function(val){
        

          this.prodList= this.prodList.filter(function(item){
              
                return item.id!=val;
            })
          
        }
    }

});
</script>
</html>